@extends('index.client')
@section('body')
    <div id="top-line"></div>
    <div class="main">
        <div class="container top">
            <div class="row">
                <div class="col s12 m8 l8">
                    <nav class="nav-main animated bounceInRight">
                        <div class="nav-left-tag"></div>
                        <div class="nav-wrapper">
                                <a href="{{url('client/index')}}" class="breadcrumb">首页</a>
                                @foreach($navlist as $list)
                                    <a href="{{url('client/index').'?'.$list->key.'='.$list->val}}" class="breadcrumb">{{$list->val}}</a>
                                    @endforeach
                        </div>
                    </nav>
                    @foreach($posts as $post)
                        <div class="card aos-item" data-aos="fade-up" aos-duration="3000">
                            <div class="card-image title-img">
                                <img src="{{$post->meta->img}}">
                                <span class="card-title"><a href="{{url('client/view').'/'.$post->id}}">{{$post->title}}</a></span>
                            </div>
                            <div class="card-content content-panel">
                                <p class="content-cell">{{\App\Services\Util::trimAll($post->content)}}</p>
                            </div>
                            <div class="card-action" style="padding: 0 24px;">
                                <div class="bottom-info">
                                <i class="material-icons ">mode_comment</i>
                                <i class="material-icons">date_range</i>{{$post->created_at}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div>{{$posts->links()}}</div>
                </div>
                <div class="col s12 m4 l4">
                    <ul class="collapsible side-cate" data-collapsible="expandable">
                        <li class="active">
                            <div class="collapsible-header"><i class="material-icons">filter_drama</i>标签云</div>
                            <div class="collapsible-body">
                                <span>
                                    <div class="tag-panel">
                                    @foreach($tags as $tag)
                                    <a class="chip" href="{{url('client/index').'?tag='.$tag->name}}">{{$tag->name}}</a>
                                    @endforeach
                                    </div>
                                </span>
                            </div>
                        </li>
                        <li class="active">
                            <?php $cpages = \App\Services\PageService::catePages();?>
                            <div class="collapsible-header"><i class="material-icons">place</i>归档</div>
                            <div class="collapsible-body">
                                <span>
                                    <ul class="collection with-header">
                                    <li class="collection-header"><h5>文章归档</h5></li>
                                    @foreach($cpages as $cp)
                                    <li class="collection-item"><a href="{{url('client/index').'?date='.$cp->time}}">{{$cp->time}}</a><div class="chip item-chip">{{$cp->count}}</div></li>
                                    @endforeach
                                    </ul>
                                </span>
                            </div>
                        </li>
                        <li class="active">
                            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
                            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="up-top">
        <a href="#top-line" class="arctic_scroll"><i class="material-icons">arrow_upward</i></a>
    </div>
<script>
    $(document).ready(function(){
        $('.slider').slider();
        $('.collapsible').collapsible();
    });
    AOS.init({
        easing: 'ease-in-out-sine'
    });
    var options = [
        {selector: '.class', offset: 200, callback: customCallbackFunc },
        {selector: '.other-class', offset: 200, callback: function() {
            customCallbackFunc();
        } },
    ];
    Materialize.scrollFire(options);
</script>
@endsection
